<template>
  <div class="play-top-container" :style="{height:heightl + 'px'}">
    <div class="l-container clearfix">
      <h1 class="ellipsis-two" :title="courseWareInfo.coursewareName">
        {{courseWareInfo.coursewareName}}</h1>
      <div class="play-paction-wrap" ref="playPactionWrap">
        <div id="player">
          <iframe v-if="iframeSrc !== ''" width="100%" height="100%" scrolling="no" frameborder="0" name="courseFrame" id="iframeid"
                  ref="iframeid"
                  :src="iframeSrc">
          </iframe>
          <!--<iframe width="100%" height="100%" scrolling="no" frameborder="0" name="courseFrame" id="iframeid"
				  src="/ftpRoot/resource/kj/20220410_041/index.html?&filename=20220410_041&position=1&totalNum=9&firstIn=true">
		  </iframe>-->
          <!--<iframe width="100%" height="100%" scrolling="no" frameborder="0" name="courseFrame" id="iframeid"
				  src="/ftpRoot/resource/kj/course_template/an2_keyword3/index_micro.html?&filename=${pd.FILENAME}&position=1&totalNum=9">
		  </iframe>-->

        </div>
        <div class="unfold-wrap" style="display:none;">
          <div class="arrow-wrap" title="收起列表">
            <div class="arrow">
              <span class="layui-icon layui-icon-right"></span>
            </div>
          </div>
        </div>
      </div>

      <div class="listbox" :style="{'height':playPactionWrapHeight + 'px'}">
        <h3>本节课程您学习了<span>{{courseWareInfo.schedule}}%</span>  <el-button size="mini" type="primary" class="refsh" @click="getInfo" round>刷新</el-button></h3>
        <ul class="top-manu-wrap clearfix">
          <li id="component-title-list" class="top-component-title" :class="{'current-title':currentNav == 0}" value="0"
              @click="currentNav = 0">播放列表
          </li>
          <li id="component-title-info" class="top-component-title" :class="{'current-title':currentNav == 1}" value="1"
              @click="currentNav = 1">课程简介
          </li>
        </ul>
        <div class="classListWrap" ref="classListWrap"
             :style="classListWrapStyle"
             :class="{overflowY}">
          <div class="classList component-title-list-continer clearfix" v-show="currentNav == 0">
            <div class="classItem" v-for="(item,index) in courseWareList">

              <!-- <div class="classImgWrap">
				 <img src="~@assets/images/course_login.png" alt="">
				 <span class="timeLength">00:40:00</span>
			   </div>-->
              <div class="anthology-title-wrap">
                <div class="title " @click="changeCouserware(item,index)" :class="{currentTitle:index  == Number(courseWareIndex)}"
                     :title="$utils.unEscapeHTML(item.name)">{{$utils.unEscapeHTML(item.name)}}
                </div>
              </div>
            </div>
          </div>
          <div class="classList component-title-info-continer clearfix" v-if="currentNav == 1">
            <div class="title">教师简介</div>

            <div class="info">
              <p class="mb-5">{{courseWareInfo.teacherName}}</p>
              <p>{{courseWareInfo.teacherInfo}}</p>
            </div>

            <div class="title">课程简介</div>

            <div class="info">
              <p>{{courseWareInfo.info}}</p>
            </div>

          </div>
        </div>

      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="nextPalyDialog"
      :show-close="false"
      :close-on-click-modal="true"
      :close-on-press-escape="false"
      width="30%"
    >
      <span>{{nextPlayMsg}}，</span>
      <span style="color:red;"> {{sencond}} </span>
      <span>秒后自动关闭。</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="sendMsg" type="primary" size="mini">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import index from "./indexjs";

  export default {
    ...index
  }
</script>

<style scoped lang="scss">
  @import "~@/styles/variables.scss";
  @import "index";
</style>
